<template>
	<view>
		<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="page_header">
				<view class="income_number">￥{{userBalance}}</view>
				<view class="income_descript">累计收益(元)</view>
				<view class="income_balance">账户余额(元)：￥{{userBalance}}</view>
			</view>
			<view class="agant_row_box">
				<view class="agant_row">
					<view class="agant_row_content flexRow border-bottom">
						<view class="agant_content_child agant_content_border">
							<view class="agant_content_text">今日总收入</view>
							<view class="">{{header.new_today || 0 }}</view>
						</view>
						<view class="agant_content_child agant_content_border">
							<view class="agant_content_text">本周总收入</view>
							<view class="">{{header.new_weeks || 0 }}</view>
						</view>
						<view class="agant_content_child">
							<view class="agant_content_text">本月总收入</view>
							<view class="">{{header.new_month || 0 }}</view>
						</view>
					</view>
				</view>
				<view class="agant_row">
					<view class="agant_row_content flexRow">
						<view class="agant_content_child agant_content_border">
							<view class="agant_content_text">今日代理收入</view>
							<view class="">{{header.new_agent_today || 0 }}</view>
						</view>
						<view class="agant_content_child agant_content_border">
							<view class="agant_content_text">本周代理收入</view>
							<view class="">{{header.new_agent_weeks || 0 }}</view>
						</view>
						<view class="agant_content_child">
							<view class="agant_content_text">本月代理收入</view>
							<view class="">{{header.new_agent_month || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="income_list">
				<view class="task_label flexRow">
					<image src="/static/img/task_lable.png"></image>
					<view>历史收入</view>
				</view>
				<view class="income_row flexRow" v-for="(item,key) in list" :key='key'>
					<view class="income_row_left">
						<view class="income_row_title">{{item.note}}</view>
						<view class="income_row_time">{{item.create_time}}</view>
					</view>
					<view class="income_row_right">+ {{item.num || 0 }} (积分)</view>
				</view>
			</view>
		</mescroll-uni>	
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import request from '../../apiRequest/request.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				header: {},
				list: [],
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
				config: {}
			}
		},
		computed:{
			userBalance: function(){
				return this.header.total_sum/this.config.integral_ratio || 0
			}
		},
		onLoad() {
			this.config = uni.getStorageSync('config');
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				request.integralDetail(page.num,15).then(res=>{
					this.header = res.data.header
					if(page.num==1) this.list = [];
					this.list = this.list.concat(res.data.list)
					let hasNext =  res.data.list.length < 15? false:true;
					this.mescroll.endSuccess(this.list.length,hasNext)
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		}
	}
</script>

<style>
.page_header{
	box-sizing: border-box;
	width:100%;
	min-height:300rpx;
	background:linear-gradient(-30deg,rgba(4,137,255,1),rgba(145,201,255,1));
	padding-top: 76rpx;
	text-align: center;
}
.income_number{
	font-size:68rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:68rpx;
	margin-bottom: 20rpx;
}
.income_descript{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	line-height:28rpx;
	opacity:0.5;
}
.income_balance{
	font-size:24rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	line-height:53rpx;
}
.agant_row_box{
	padding-bottom: 20rpx;
	background:rgba(247,247,247,1);
}
.agant_row{
	background:rgba(255,255,255,1);
	padding: 0 20rpx;
}
.agant_row_title{
	border-bottom: 1rpx solid rgba(238,238,238,1);
	line-height: 66rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(100,100,100,1);
}
.agant_row_title_L,.agant_row_title_R{
	/* padding-right: 80rpx; */
	width: 350rpx;
}
.agant_row_content{
	padding: 40rpx 0;
	min-height: 180rpx;
	box-sizing: border-box;
}
.agant_row_content>view{
	flex: 1;
	text-align: center;
}
.agant_content_border{
	border-right: 2rpx solid rgba(238,238,238,1);
}
.agant_content_child>view{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(172,172,172,1);
}
.agant_content_text{
	margin-bottom: 20rpx;
}
.border-bottom{
	border-bottom: 1rpx solid rgba(237,237,237,1);
}
.income_list{
	padding: 0 20rpx;
}
.task_label{
	padding-left: 20rpx;
}
.income_row{
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid rgba(237,237,237,1);
	align-items: center;
	justify-content: space-between;
}
.income_row_right{
	font-size:27rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(253,201,32,1);
}
.income_row_title{
	font-size:27rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	line-height:27rpx;
	margin-bottom: 16rpx;
}
.income_row_time{
	font-size:23rpx;
	font-family:Arial;
	font-weight:400;
	color:rgba(171,171,171,1);
	line-height:23rpx;
}
</style>
